<template>
	<view style="width: 100%;height: 100%;">
		<!-- 头部 -->
		<view class="tn-gradient-bg__cool-6 tn-bg-image top-font-title reqsnHeadBatten"
			style="width: 100%; display: flex;flex-direction: column;align-items: center;">
			<!-- 顶部占位 -->
			<view :style="'height:'+sConf.tH+'px;'"> </view>

			<!-- 标题 -->
			<view style="padding: 40px 100px;font-size: large;font-weight: bold;color: #fff;">订单中心
			</view>
		</view>

		<!-- tabs页眉 -->
		<tn-switch-tab v-model="curState" :tabs="tabs" style="width: 100%;margin-top: 10px;" click-modifiers="stop"
			@change="collapseChange"></tn-switch-tab>
		<!-- 滚动内容页 -->
		<scroll-view class="reqsnSlBlock" scroll-y :style="'height:'+topH+'px;'" @scrolltolower="EventSCroll">
			<subReqsnCard v-for="(item, index) in reqsnList" :key="index" :data="item"></subReqsnCard>
			<!-- empty -->
			<view v-if="reqsnList.length === 0" style="padding: 45px 0;">
				<tn-empty mode="order"></tn-empty>
			</view>
			<!-- None -->
			<view v-if="showEnd" style="display: flex;justify-content: center;padding: 20px;">
				<text style="color: #888;">---没有更多订单了---</text>
			</view>
		</scroll-view>

		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{title}}
		</tn-navbar>
	</view>

	<!--popup-->
	<tn-popup v-model="showPopup">
		<view style="display: flex;flex-direction: column;align-items: center;gap: 10px;padding: 30px;">
			<tn-icon name="wechat" size="128" color="#4cd964"></tn-icon>
			<text style="font-size: large;font-weight: bold;"> 您还未登录 </text>
			<text style="font-size: small;">请先登录再进行操作</text>
			<button type="primary" style="margin-top: 30px;width: 280px;" @click="loginChange"> 快速登录 </button>
		</view>
	</tn-popup>
</template>

<script>
	import utils from '@/common/utils.js';
	import login from '../js_sdk/lib/login.js';
	import subReqsnCard from '../components/sub-reqsn-card/sub-reqsn-card.vue'
	export default {
		data() {
			return {
				topH: 500,
				title: '悦君玺 • 重庆',
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				showEnd: false, // 显示底线
				sConf: getApp().globalData,
				showPopup: false, // 登录窗口

				tabs: ['待付款', '待发货', '待收货', '已收货', '全部'],
				curState: 0, // 当前状态
				reqsnList: [], // 订单列表

			}
		},
		onLoad(options) {
			const state = Number(options.state || 0);
			this.curState = state < 0 ? 4 : state;
			console.log('onLoad', state);
		},
		onReady() {
			console.log('onReady');
			this.designLayout()
			setTimeout(() => {
				this.loadCheckLogin()
			}, 2000)
		},
		components: {
			subReqsnCard
		},
		methods: {
			designLayout() {
				console.log('计算窗口布局');
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.reqsnSlBlock').boundingClientRect();
					query.exec((res) => {
						this.topH = this.sConf.iH - res[0].top - 10 - 10;
					});
				})
			},
			loadCheckLogin() {
				// this.showPopup = true;
				// return 
				// 加载登录信息
				let prefix = this.sConf.run === 'trial' ? 'dev' : ''
				try {
					const stamp = Date.now();
					const token = uni.getStorageSync(prefix + 'token');
					const auth = uni.getStorageSync(prefix + 'auth');
					const last = uni.getStorageSync(prefix + 'last');
					if (token && auth && ((stamp - last) < 10 * 3600 * 1000)) {
						this.sConf.token = token;
						this.sConf.auth = auth;
						this.loadDefData();
					} else {
						this.showPopup = true;
					}
				} catch (e) {
					this.showPopup = true;
				}
			},
			loginChange() {
				login.loginManual(this.sConf.host).then(res => {
					console.log('登录成功');
					this.showPopup = false
					this.loadCheckLogin()
				}).catch(err => {
					console.log('登录失败');
					uni.showToast({
						title: '登录失败'
					})
				})
			},
			loadDefData() {
				uni.showLoading({
					title: '加载中...'
				})
				console.log('loadDefData');
				let host = this.sConf.host + '/weapps/listReqsn/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					page: this.page,
					size: this.size,
				}
				if (this.curState < 4) {
					data.status = this.curState
				}
				utils.authenticatorList(host, token, data).then(res => {
					console.log('拉取订单数据', res);
					if (res.rescode === 200) {
						if (this.page === 1) {
							this.reqsnList = res.resmsg
						} else {
							this.reqsnList = this.reqsnList.concat(res.resmsg)
						}
						this.count = res.count
						this.size = res.size
					}
					if (res.rescode === 404) {
						if (this.page > 1) {
							this.page--
						}
						this.showEnd = true
					}
					if (res.rescode === 401) {
						this.showPopup = true;
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			collapseChange(e) {
				console.log('collapseChange', e, this.reqsnList.length);
				this.page = 1
				this.reqsnList = []
				this.loadDefData()
			},
			EventSCroll(e) {
				console.log('EventSCroll', e);
				this.page++
				this.loadDefData()
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>